<template>
  <view @click="gotoDetail" class="song-item">
    <image lazy-load class="song-pic" :src="song.picUrl" mode="aspectFill"></image>
    <view class="text">{{song.name}}</view>
  </view>
</template>
<script setup>
 const props = defineProps({
    song: {
      type: Object,
      default: () => {}
    }
  })
  const emit = defineEmits(['click'])
  const gotoDetail=()=>{
    emit('click')
  }
</script>
<style lang="less" scoped>
  .song-item {
    display: inline-block;
    margin-right: 20rpx;
    width: 250rpx;
    // display: flex;
    
    .song-pic {
      width: 250rpx;
      height: 250rpx;
      border-radius: 16rpx;
      
    }

    .text {
      height: 64rpx;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px;
      // white-space: pre-wrap
      white-space: normal !important;
    }
  }
</style>
